import React from "react";
import {List} from "antd";
import {apiGetAuthGetIndexSalesRank} from '@/request/system/home'
import TheImage from "../../../../components/TheImage";
import rank1 from '@/assets/icons/rank1.png'
import rank2 from '@/assets/icons/rank2.png'
import rank3 from '@/assets/icons/rank3.png'

class PlusList extends React.Component {
    state = {
        dataSource: null
    }

    async componentDidMount() {
        await this.getData()
    }

    getData = async () => {
        const response = await apiGetAuthGetIndexSalesRank()
        if (response.code === 0) {
            this.setState({
                dataSource: response.data
            })
        }
    }

    render() {
        const {dataSource} = this.state;
        return <div className={'plus-list'}
                    style={{display: "grid", gridTemplateColumns: "repeat(3,33%)", justifyContent: "space-between"}}>
            {
                dataSource && dataSource.map(v => {
                    return <List
                        dataSource={v.data}
                        header={
                            <div
                                style={{
                                    color: '#333333',
                                    fontSize: 16
                                }}
                            >
                                {
                                    v.type === '1' ? '门店销售额排行' :
                                        v.type === '2' ? '商户销售额排行' :
                                            '积分商城商品兑换量排行'
                                }
                            </div>
                        }
                        bordered
                        renderItem={(item, index) => {
                            return <List.Item>
                                <div style={{display: "flex", alignItems: "center"}}>
                                    {
                                        index < 3 &&
                                        <TheImage
                                            src={index + 1 === 1 ? rank1 : index + 1 === 2 ? rank2 : rank3}
                                            width={24}/>
                                    }
                                    {
                                        index > 2 && <span className={'rank'}>{index + 1}</span>
                                    }
                                    {v.type === '3' &&
                                    <div style={{marginLeft: 10}}><TheImage src={`${React.$mediaUrl}${item.imgId}/0/0`}
                                                                            width={50}/>
                                    </div>}
                                    <p style={{marginLeft: 10}}>{item.orderTypeName}</p>
                                </div>
                                <div style={{display: "flex", alignItems: "center"}}>
                                    {v.type === '3' ? <p>{item.count}</p> :
                                        <p><React.$price price={item.count} symbol={''}/></p>}
                                    <p>{item.unit}</p>
                                </div>
                            </List.Item>
                        }
                        }
                    />
                })
            }
        </div>
    }
}

export default PlusList;